<!--请求方和接口的关联管理页面-->
<template>
    <div>
        <el-row>
            <el-col :span="22" class="toolbar marginTop10px" id="serachId">
                <el-form :model="conditionForm" ref="conditionFormRef">
                    <el-button size="small" type="primary" @click="dialogFormVisible = true" style="float:left;margin-top:4px;">新增</el-button>
                    <el-form-item style="float:right">
                        <el-button type="primary" size="small" @click="onSearch">&nbsp;搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;">
                        <el-input v-model="conditionForm.keyword" size="small" auto-complete="off" placeholder="关键字" @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;">
                        <el-select v-model="conditionForm.searchType" size="small" placeholder="请选择">
                            <el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="toolbar">
            <el-col :span="23" class="titleLineSymbolTwo">
                <el-table :data="resultDate.data.list" stripe style="width: 100%">
                    <el-table-column type="index" label="序号" min-width="50"></el-table-column>
                    <el-table-column prop="requesterId" label="请求者ID" min-width="150" v-if="false" ></el-table-column>
                    <el-table-column prop="requesterSerialNo" label="请求者标识" min-width="150"  ></el-table-column>
                    <el-table-column prop="requesterName" label="请求者名称" min-width="150"></el-table-column>
                    <el-table-column prop="serviceId" label="接口ID" min-width="150" v-if="false"></el-table-column>
                    <el-table-column prop="serviceSerialNo" label="接口标识" min-width="150" ></el-table-column>
                    <el-table-column prop="serviceName" label="接口名称" min-width="180"></el-table-column>
                    <el-table-column prop="status" label="状态" min-width="160"  >
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.status,'status_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="auditTime" label="审核时间" min-width="130" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="auditorId" label="审核者标识" min-width="100" ></el-table-column>
                    <el-table-column label="操作" min-width="200"  fixed="right" >
                        <template slot-scope="scope">
                            <!--<el-button size="small" @click="showUpdateForm(scope.$index, scope.row)">编辑</el-button>-->
                            <el-button type="text" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                            <el-button type="text" size="small" @click="audit(scope.row,'yes')" :disabled="scope.row.status!=3?false:true">审核通过</el-button>
                            <el-button type="text" size="small" @click="audit(scope.row,'no')" :disabled="scope.row.status!=3?(scope.row.status==4?true:false):true" >审核不通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
            <el-col :span="23" class=" marginTop10px">
                <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                            :current-page="resultDate.data.pageNum"
                            :page-size="resultDate.data.pageSize" :total="resultDate.data.total">
                </el-pagination>
            </el-col>

            <!--新增服务关联-->
            <!-- <el-dialog title="新增服务关联" :visible.sync="dialogFormVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false"> -->
            <Modal v-model="dialogFormVisible" title="新增服务关联" width='50%' :before-close="handleClose">
                <el-card>
                <el-form :model="addForm" ref="addFormRef" :rules="frormRules">
                    <el-form-item label="请选择请求方" :label-width="formLabelWidth" prop="requester">
                        <el-select v-model="selectRequesterObjID" placeholder="请选择请求方" @change="requesterListChange" clearable filterable>
                            <el-option
                                    v-for="item in preloadedData.requesterList"
                                    :key="item.id"
                                    :label="item.requester"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="请求者ID" :label-width="formLabelWidth" prop="requesterId" v-if="false">
                        <el-input v-model="addForm.requesterId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="请求者标识" :label-width="formLabelWidth" prop="requesterSerialNo">
                                <el-input v-model="addForm.requesterSerialNo" auto-complete="off" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请求者名称" :label-width="formLabelWidth" prop="requesterName">
                                <el-input v-model="addForm.requesterName" auto-complete="off" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="请选择调用的接口" :label-width="formLabelWidth" prop="serviceInfo">
                        <el-select v-model="selectServiceInfoID" placeholder="请选择调用的接口" @change="serviceListChange" clearable filterable>
                            <el-option
                                    v-for="item in preloadedData.serviceList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="接口ID" :label-width="formLabelWidth" prop="serviceId" v-if="false">
                        <el-input v-model="addForm.serviceId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serviceSerialNo">
                                <el-input v-model="addForm.serviceSerialNo" auto-complete="off" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="接口名称" :label-width="formLabelWidth" prop="serviceName">
                                <el-input v-model="addForm.serviceName" auto-complete="off" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('addFormRef')">确 定</el-button>
                </div>
            </Modal>
            <!-- </el-dialog> -->


            <!--编辑界面-->
            <el-dialog title="编辑服务关联" :visible.sync="updateFormVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false">
                <el-form :model="updateForm" ref="updateFormRef" :rules="frormRules">
                    <el-form-item label="请求者ID" :label-width="formLabelWidth" prop="requesterId">
                        <el-input v-model="updateForm.requesterId" auto-complete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="请求者标识" :label-width="formLabelWidth" prop="requesterSerialNo">
                        <el-input v-model="updateForm.requesterSerialNo" auto-complete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="请求者名称" :label-width="formLabelWidth" prop="requesterName">
                        <el-input v-model="updateForm.requesterName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口ID" :label-width="formLabelWidth" prop="serviceId">
                        <el-input v-model="updateForm.serviceId" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口标识" :label-width="formLabelWidth" prop="serviceSerialNo">
                        <el-input v-model="updateForm.serviceSerialNo" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="接口名称" :label-width="formLabelWidth" prop="serviceName">
                        <el-input v-model="updateForm.serviceName" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doUpdate('updateFormRef')">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>

    import {
        assoc_add,
        assoc_check,
        assoc_del,
        assoc_searchByCondition,
        assoc_update,
        req_searchByCondition,
        ser_searchByCondition
    } from '../api/api.js';
    import utils from '../api/utils.js';

    export default {
        data() {
            return {
                resultDate: {data:{total:0, pageNum: 0}},// 列表数据对象
                formLabelWidth: '150px',// 新增界面label大小
                addForm: {},//新增界面数据
                dialogFormVisible: false,//新增界面是否显示
                frormRules: { // 新增界面校验规则
                    requester: [
                        { required: true, message: '请选择请求者', trigger: 'blur' }
                    ],
                    serviceInfo: [
                        { required: true, message: '请选择接口', trigger: 'blur' }
                    ],
                },
                updateForm:{},// ---------  更新
                updateFormVisible:false,
                conditionForm: {searchType: "", keyword: "", pageSize: 5},
                searchTypeOptions: [{
                    value: 'requesterName',
                    label: '请求者名字'
                }, {
                    value: 'serviceName',
                    label: '接口名字'
                }, {
                    value: 'requesterSerialNo',
                    label: '请求者标识'
                }, {
                    value: 'serviceSerialNo',
                    label: '接口标识'
                }, {
                    value: 'all',
                    label: '全部',
                }],

                preloadedData:{requesterList:[],serviceList:[]},
                selectRequesterObjID:"",// 被选择的请求者ID，解决select后显示bug
                selectServiceInfoID:"",// 被请求的服务ID，解决select后显示bug

            };
        },
        methods: {
            requesterListChange(){
                let _this = this;
                this.preloadedData.requesterList.map(function(item){
                    if(item.id==_this.selectRequesterObjID){
                        _this.addForm.requester = item
                        _this.addForm.requesterId = _this.addForm.requester.id
                        _this.addForm.requesterSerialNo = _this.addForm.requester.serialNo
                        _this.addForm.requesterName = _this.addForm.requester.requester
                        console.log(_this.addForm)
                    }
                })
            },
            serviceListChange(){//
                let _this = this;
                this.preloadedData.serviceList.map(function(item){
                    if(item.id==_this.selectServiceInfoID){
                        _this.addForm.serviceInfo = item
                        _this.addForm.serviceId = _this.addForm.serviceInfo.id
                        _this.addForm.serviceSerialNo = _this.addForm.serviceInfo.serialNo
                        _this.addForm.serviceName = _this.addForm.serviceInfo.name
                        console.log(_this.addForm)
                    }
                })
            },
            handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.onSearch();// 翻页后刷新页面数据
            },
            handleClose(done) { // 新增界面关闭事件
                this.$confirm('确认关闭？',"提示").then(_ => {done();}).catch(_ => {});
            },
            submitForm(formName) { // 新增界面提交事件
                let params = Object.assign({}, this.$refs[formName]._props.model);
                console.log(params);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            assoc_add(params).then(res=>{
                                console.log(res.data.msg);
                                this.$message.success(res.data.msg);
                                if(res.data.code=='S100101'){
                                    this.addForm = {};
                                    this.selectServiceInfoID=''
                                    this.selectRequesterObjID=''
                                    this.onSearch();
                                }
                            }).catch(err=>{
                                this.$message.error("系统异常");
                                console.log("系统异常"+err);
                            });
                            this.dialogFormVisible = false;
                        });
                    }
                });
            },
            // 查询
            onSearch(){  // 发出列表请求，并更新当前页面数据
                var _this = this
                _this.conditionForm.pageNum=_this.currentPage;
                assoc_searchByCondition(_this.conditionForm)
                    .then(res => {
                        if(res.data.code!="S100101"){_this.$message.warning(res.data.msg);}  // todo
                        _this.resultDate = res.data;
                    }).catch(function (error) {
                        console.log("系统异常:"+error);
                        _this.$message.warning('系统异常 ');
                    });
            },
            //删除
            handleDel (index, row) { // 数据项删除操作
                this.$confirm('是否删除当前该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    assoc_del(row.requesterId,row.serviceId).then((res) => {
                        if(res.data.code=='S100101'){
                            this.$message.success('删除成功!');
                            this.onSearch();
                        }else{
                            this.$message.warning('删除失败! '+res.data.msg);
                            this.onSearch();
                        }
                    }).catch((err) => {
                        this.$message.error('删除失败!');
                        console.log('删除失败：'+err);
                    });
                })
            },
            showUpdateForm(index, row){
                this.updateForm={};
                this.updateFormVisible = true;
                this.updateForm = Object.assign({}, row);
            },
            doUpdate(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            assoc_update(this.updateForm).then((res) => {
                                if(res.data.code=='S100101'){
                                    this.$message.success('更新成功!');this.onSearch();
                                }else{
                                    this.$message.warning('更新失败! '+res.data.msg);this.onSearch();
                                }
                            }).catch((err) => {
                                this.$message.error('更新失败!');
                                console.log('更新失败：'+err);
                            });
                            this.updateFormVisible = false;
                        });
                    }
                });
            },
            audit(row,yesOrNo){
                console.log(row)
                let status ;
                if(yesOrNo=='yes'){
                    status=3;
                }else if(yesOrNo=='no'){
                    status=4
                }else{this.$message.error("异常操作!!!");return false;}
                assoc_check({requesterId:row.requesterId,serviceId:row.serviceId,status:status}).then((res)=>{
                    if (res.data.code == 'S100101') {
                        this.$message.success(res.data.msg);
                        this.onSearch();
                    } else {
                        this.$message.warning('操作失败! ' + res.data.msg);
                        this.onSearch();
                    }
                }).catch((err)=>{
                    this.$message.error('审核失败!');
                    console.log('审核失败：'+err);
                });
            },
            loadData(){//加载 请求者数据 和 接口数据   preloadedData.requesterList:{},preloadedData.serviceList:{}  req_searchByCondition,ser_searchByCondition
                var _this = this
                // 加载未删除、已审核的 请求者列表 数据
                req_searchByCondition({isDel:0,status:3,pageSize:999999})
                    .then(res => {
                        if(res.data.code&&res.data.code=='S100101'){
                            _this.preloadedData.requesterList = res.data.data.list;
                        }else{
                            console.log(res.data)
                            this.$message.error('加载数据异常!');
                        }
                    }).catch(function (error) {
                    console.log("系统异常:"+error);
                    this.$message.warning('系统异常 ');
                });
                // 加载未删除、已审核、已上线 接口列表 的数据
                ser_searchByCondition({isDel:0,status:3,isOnline:1,pageSize:999999})
                    .then(res => {
                        if(res.data.code&&res.data.code=='S100101'){
                            _this.preloadedData.serviceList = res.data.data.list;
                        }else{
                            console.log(res.data)
                            this.$message.error('加载数据异常!');
                        }
                    }).catch(function (error) {
                    console.log("系统异常:"+error);
                    this.$message.warning('系统异常 ');
                });
            },
            formatCommDatas(row, column){
                return utils.formatCommDatas(row,column);
            },
            formatDicTionary(value,type){
                return utils.formatDicTionary(value,type);
            },
        },
        computed: {
        },
        created() {

        },
        mounted(){
            this.onSearch();
            this.loadData();
        }


    };
</script>


